<template>
	<view>
		<view :style="{
			width:'100%',
			height:'1790rpx',
			background:'url('+ $wanlshop.oss('/uploads/20231026/7ed1fcadbcf6ba518a576fac005bd2bc.png')+ ')'
		}" class="bg"></view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				background: headerOpacity > 0?'url('+ $wanlshop.oss('/uploads/20231026/7ed1fcadbcf6ba518a576fac005bd2bc.png')+ ')':'none'
			}">
				<view class="action white" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content text-bold white" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					销售排名
				</view>
			</view>
		</view>
		<view class="sale">
			<view class="saleConter" v-if="list.length > 0">
				<view class="saleBox">
					<view class="saleBoxFlex" >
						<view class="saleItem" @click="jump(list[0].id)">
							<image src="/static/shop/two.png" class="floatImg"></image>
								<image :src="$wanlshop.oss(list[0].image)" mode="widthFix" class="saleItemImg"></image>
								<view class="saleItemTitle">{{list[0].title}}</view>
								<view class="saleItemMoeny">￥{{ list[0].price }}</view>
						</view>

						<view class="saleItem saleItem1" @click="jump(list[1].id)">
							<image src="/static/shop/one.png" class="floatImg"></image>
								<image :src="$wanlshop.oss(list[1].image)"  mode="widthFix" class="saleItemImg"></image>
								<view class="saleItemTitle">{{list[1].title}}</view>
								<view class="saleItemMoeny">￥{{ list[1].price }}</view>
						</view>
						<view class="saleItem saleItem2" @click="jump(list[2].id)">
							<image src="/static/shop/three.png" class="floatImg"></image>
							<image :src="$wanlshop.oss(list[2].image)"  mode="widthFix" class="saleItemImg"></image>
							<view class="saleItemTitle">{{list[2].title}}</view>
							<view class="saleItemMoeny">￥{{ list[2].price }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="listCotner">
				<view class="listBox">
					<block v-if="list.length > 0">
						<view class="listBoxItem" v-for="(item,index) in list" :key="index" @click="jump(item.id)">
							<block v-if="index>3">
								<view class="listItem">
									<image :src="$wanlshop.oss(item.image)" mode="widthFix" class="listItemImg"></image>
									<view class="listItemRight">
										<view class="listItemTitle">{{item.title}}</view>
										<view class="listItemFlex">
											<view class="listItemMoeny">￥{{ item.price }}</view>
											<!-- <view class="listItemGo">立即购买</view> -->
											<image src="/static/shop/sale.png" class="listItemGo"></image>
										</view>
									</view>
								</view>
							</block>

						</view>
					</block>
					<block v-if="list.length === 0 && status !== 'loading'">
						<wanl-empty :text="empty" />
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				StyleSheet: {
					margin: 0
				},
				current: 0,
				backgroundImg: '',
				headerOpacity: 0,
				list: [],
				params: {
					page: 1
				},
				empty: '暂无新品',
				reload: true, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
			}
		},
		onLoad() {
			this.loadData()
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		onPageScroll(e) {
			let tmpY = 50;
			e.scrollTop = e.scrollTop > tmpY ? 50 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		methods: {
			jump(id) {
				this.$wanlshop.to(`/pages/product/goods?id=${id}`);
			},
			async loadData() {
				await uni.request({
					url: '/wanlshop/product/ranking',
					data: this.params,
					method: 'POST',
					success: res => {
						console.log("czxczcz", res)
						this.status = 'more';
						this.list = this.reload ? res.data : this.list.concat(res.data); //数据 追加
						if (res.data.length == 0) {
							this.empty = `暂无新品`;
						}
						// this.params.page = res.data.current_page; //当前页码
						// this.last_page = res.data.last_page; //总页码
						console.log("this.list", this.list)
					}
				});

			},
			onchange(e) {
				console.log(e)
				this.current = e.detail.current
				console.log(this.banner[this.current].media)
				this.backgroundImg = this.$wanlshop.oss(this.banner[e.detail.current].media)
				console.log(this.backgroundImg)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #11112b;
	}

	.cu-bar {
		background-size: 100% !important;
		background-repeat: no-repeat !important;
	}

	.bg {
		background-size: 100% 100% !important;
		position: absolute;
	}

	.sale {
		margin-top: 730rpx;
		position: sticky;
		z-index: 9;
	}

	.saleConter {
		padding: 0 30rpx;

		.saleBox {
			width: 100%;
			// height: 374rpx;
			background: #fbf5ec;
			border-radius: 20rpx;

			.saleBoxFlex {
				display: flex;

				.saleItem {
					width: 181rpx;
					height: auto;
					margin-top: 86rpx;
					text-align: center;
					margin-left: 24rpx;
					position: relative;

					.saleItemImg {
						width: 122rpx;
						height: 122rpx;
					}

					.saleItemTitle {
						font-size: 21rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						line-break: anywhere;
						margin-top: 24rpx;
					}

					.saleItemMoeny {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #EB2222;
						margin-top: 23rpx;
					}
				}

				.saleItem1 {
					width: 207rpx;
					margin-top: 49rpx;
					margin-left: 40rpx;
					margin-right: 40rpx;

					.saleItemImg {
						width: 140rpx;
						height: 140rpx;
					}

					.saleItemTitle {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}

				.saleItem2 {
					margin-left: 0;
				}
			}
			.floatImg{
				width: 76rpx;
				height: 48rpx;
				position: absolute;
				top: -23rpx;
				z-index: 10;
				left: 0rpx;
			}
		}
	}


	.listCotner {
		padding: 0 30rpx 30rpx 30rpx;
		margin-top: 30rpx;

		.listBox {
			width: 100%;
			height: auto;
			padding: 0 0 30rpx 0;
			background: #fbf5ec;
			border-radius: 20rpx;
			position: relative;

			.listBoxTop {
				position: absolute;
				left: 50%;
				top: -40rpx;
				margin-left: -185rpx;
				width: 390rpx;
				height: 80rpx;

			}

			.listBoxItem {
				padding: 0 25rpx;

				.listItem {
					width: 100%;
					height: 216rpx;
					border-bottom: 1rpx solid #c6c1bb;
					display: flex;
					align-items: center;

					.listItemImg {
						width: 140rpx;
						height: 140rpx;
					}

					.listItemRight {
						width: 460rpx;
						height: 140rpx;
						margin-left: auto;

						.listItemTitle {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}

						.listItemFlex {
							display: flex;
							align-items: center;
							margin-top: 20rpx;

							.listItemMoeny {
								font-size: 32rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #EB2222;
							}

							.listItemGo {
								width: 135rpx;
								height: 50rpx;
								border-radius: 12rpx;
								text-align: center;
								line-height: 50rpx;
								margin-left: auto;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
	}
</style>